<template>
  <div class="app-header">
    <div class="app-container">
      <div class="left">
        <a href="/" class="logo">凹凸租车</a>
      </div>
      <ul class="right">
        <li class="menu" :class="{'active': $route.path.includes('/index')}">
          <a href="/">首页</a>
        </li>
        <li class="menu" :class="{'active': $route.path.includes('rent')}">
          <a href="javascript:;">租车服务</a>
          <div class="dropmenu">
            <div class="submenu">
              <a href="/short_rent">短租</a>
              <a href="/long_rent">长租</a>
              <a href="">个性车</a>
              <a href="">企业租车</a>
            </div>
          </div>
        </li>
        <li class="menu" :class="{'active': $route.path.includes('/car_owner')}">
          <a href="javascript:">车主招募</a>
          <div class="dropmenu">
            <div class="submenu">
              <a href="/car_owner">成为车主</a>
              <a href="">商家入驻</a>
            </div>
          </div>
        </li>
        <li class="menu" :class="{'active': $route.path.includes('/about')}">
          <a href="/about">关于凹凸</a>
        </li>
        <li class="menu" :class="{'active': $route.path.includes('/signup')}">
          <a href="/signup">注册
            <span style="background:url(https://cdn.atzuche.com/pc/bubble-1688.png?v=1?v=1) no-repeat 50% / cover" class="extra"></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- /.app-header -->

  <!-- 子路由 -->
  <router-view/>

  <div class="app-footer">
    <div class="app-container">
      <div class="row about">
        <div class="cell">
          <h6>关于我们</h6>
          <p><a href="">关于凹凸</a></p>
          <p><a href="">发展历程</a></p>
          <p><a href="">媒体报道</a></p>
          <p><a href="">品牌库</a></p>
          <p><a href="">租车价格表</a></p>
          <p><a href="">全国租车</a></p>
        </div>
        <div class="cell">
          <h6>规则条款</h6>
          <p><a href="">平台规则</a></p>
          <p><a href="">租车流程</a></p>
          <p><a href="">服务条款</a></p>
          <p><a href="">车主责任</a></p>
          <p><a href="">隐私协议</a></p>
        </div>
        <div class="qr">
          <div class="qr-item">
            <h6>支付宝小程序</h6>
            <img src="https://cdn.atzuche.com/pc/qr/alipay.png">
          </div>
          <div class="qr-item">
            <h6>微信小程序</h6>
            <img src="https://cdn.atzuche.com/pc/qr/wechat.png">
          </div>
          <div class="qr-item">
            <h6>微信公众号</h6>
            <img src="https://cdn.atzuche.com/pc/qr/official-account.png">
          </div>
          <div class="qr-item">
            <h6>APP下载</h6>
            <img src="https://cdn.atzuche.com/pc/qr/app.png">
          </div>
        </div>
      </div>
      <div class="row copyright">
        <div class="cell title">
          <div class="logo"></div>
        </div>
        <div class="content cell">
          <h6>©2022 上海馨煜信息科技有限公司</h6>
          <p>
            <a href="" target="_blank">沪ICP备17039182号-2&nbsp;&nbsp;沪公网安备 31010402000209号</a>
            &nbsp;&nbsp;经营增值电信业务许可：合字B2-20210054&nbsp;&nbsp;标识编号: 20180329133434646
          </p>
          <p>违法和不良信息举报邮箱：inbound@atzuche.com&nbsp;&nbsp;举报电话：16601791150</p>
          <p>您可以通过
            <a href="" target="_blank" style="border-bottom:solid 1px rgba(255, 255, 255, 0.6)">中国互联网联合辟谣平台</a>
            提供谣言线索、查证网络谣言（<a href="" target="_blank">https://www.piyao.org.cn/</a>）
          </p>
        </div>
      </div>
      <div class="row gov">
        <div class="cell left"></div>
        <div class="cell right">
          <p>亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听</p>
          <p>扫黑除恶众志成城，平安上海人人参与。</p>
          <p>全国扫黑除恶举报电话：010—12389，上海市扫黑除恶举报电话：021—52397077，全国扫黑除恶举报网站：
            <a href="" target="_blank">www.12389.gov.cn</a>
          </p>
          <div class="gov-link">
            <a href="" target="_blank">
              <img src="">
            </a>
            <a href="javascript:;">
              <img src="">
            </a>
            <a href="" target="_blank">
              <img src="https://www.atzuche.com/static/media/2.fd614a8d.png">
            </a>
            <a href="" target="_blank">
              <img src="https://www.atzuche.com/static/media/4.dcfa4a86.png">
            </a>
          </div>
        </div>
      </div>
      <!-- /.row -->
    </div>
    <!-- /.app-container -->
  </div>
  <!-- /.app-footer -->

  <a class="scroll-top" v-if="isScrollTop" @click="scrollTop">
    <el-icon><ArrowUp /></el-icon>
  </a>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ArrowUp} from "@element-plus/icons-vue";

/* 滚动到顶部 */
const isScrollTop = ref(false)
const scrollTop = () => {
  window.scrollTo({top: 0, behavior: 'smooth'})
}
onMounted(() => {
  window.addEventListener('scroll', () => {
    isScrollTop.value = window.scrollY > 100
  })
})
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

a, a:hover {
  color: #666;
}

.app-container {
  width: 1024px;
  margin: 0 auto;
}

.app-header {
  min-width: 1024px;
  background: #fff;
  -webkit-box-shadow: 0 2px 50px rgba(60, 60, 90, .05);
  box-shadow: 0 2px 50px rgba(60, 60, 90, .05);
  -webkit-transition: all .35s linear;
  transition: all .35s linear;
}

.app-header .app-container {
  position: relative;
  height: 80px;
  padding-top: 20px;
}

.app-header .left {
  position: absolute;
  top: 28px;
  z-index: 9;
}

.app-header .left .logo {
  width: 108px;
  height: 32px;
  display: block;
  font-size: 0;
  background: url() no-repeat 50%/100%;
}

.app-header .right {
  position: relative;
  -ms-flex: 1 1;
  flex: 1 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin: 0;
  list-style: none;
}

.app-header .right .menu {
  margin-left: 20px;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  color: #3c3c5a;
  max-width: 100px;
  box-sizing: border-box;
}

.app-header .right .menu > a {
  line-height: 40px;
  color: inherit;
  display: block;
  min-width: 88px;
  padding: 0 20px;
  font-weight: 600;
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.app-header .right .menu.active > a,
.app-header .right .menu:hover > a {
  background: #00cf97;
  color: #fff;
}

.app-header .right .menu .dropmenu {
  padding-top: 30px;
  position: absolute;
  opacity: 0;
  top: 40px;
  left: 0;
  z-index: 99;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  pointer-events: none;
}

.app-header .right .menu .dropmenu:hover {
  opacity: 1;
  -webkit-transition: all .5s cubic-bezier(0, .41, .18, .98);
  transition: all .5s cubic-bezier(0, .41, .18, .98);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  pointer-events: auto;
}

.app-header .right .menu > a:hover + .dropmenu {
  opacity: 1;
  -webkit-transition: all .5s cubic-bezier(0, .41, .18, .98);
  transition: all .5s cubic-bezier(0, .41, .18, .98);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  pointer-events: auto;
}

.app-header .right .menu .dropmenu .submenu {
  display: block;
  background: #fff;
  border-radius: 10px;
  width: 100px;
  margin: 0 auto;
  padding: 0 14px;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  position: relative;
}

.app-header .right .menu .dropmenu .submenu:after {
  content: "";
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-bottom-color: #fff;
  position: absolute;
  left: 50%;
  margin-left: -9px;
  top: -15px;
}

.app-header .right .menu .dropmenu .submenu > a {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #3c3c5a;
  font-size: 12px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.app-header .right .menu .dropmenu .submenu > a.active,
.app-header .right .menu .dropmenu .submenu > a:hover {
  color: #00cf97;
}

.app-header .right .menu > a .extra {
  width: 66px;
  height: 19px;
  position: absolute;
  top: -8px;
  right: -32px;
  font-size: 10px;
  line-height: 14px;
  color: #3c3c5a;
  text-align: center;
}

.app-footer {
  min-width: 1024px;
  background-color: #232531;
}

.app-footer .row {
  position: relative;
  color: hsla(0, 0%, 100%, .6);
  font-size: 12px;
  display: -ms-flexbox;
  display: flex;
  line-height: 24px;
}

.app-footer .row.about {
  padding: 50px 0 24px;
  border-bottom: 1px solid hsla(0, 0%, 100%, .1);
}

.app-footer .row.about .cell {
  width: 120px;
  margin-right: 20px;
}

.app-footer .row h6 {
  color: hsla(0, 0%, 100%, .8);
  font-size: 13px;
  line-height: 24px;
}

.app-footer .row.about .cell h6 {
  margin-bottom: 10px;
}

.app-footer .row p {
  font-size: 12px;
  line-height: 24px;
}

.app-footer .row a {
  color: hsla(0, 0%, 100%, .6);
  line-height: 24px;
  font-size: 12px;
}

.app-footer .row a:hover {
  opacity: .75;
}

.app-footer .row.about .qr {
  position: absolute;
  right: 0;
  top: 60px;
  display: -ms-flexbox;
  display: flex;
}

.app-footer .row.about .qr .qr-item {
  margin-left: 16px;
}

.app-footer .row.about .qr .qr-item h6 {
  margin-bottom: 18px;
  text-align: center;
}

.app-footer .row.about .qr .qr-item img {
  width: 112px;
  height: 112px;
  display: block;
}

.app-footer .row.copyright {
  padding: 24px 0;
  border-bottom: 1px solid hsla(0, 0%, 100%, .1);
}

.app-footer .row.copyright .logo {
  width: 140px;
  height: 24px;
  background: url() no-repeat 0/84px 24px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.app-footer .row.copyright .content {
  -ms-flex: 1 1;
  flex: 1 1;
}

.app-footer .row.copyright .content h6 {
  font-size: 12px;
}

.app-footer .row.gov {
  padding: 24px 0 50px;
}

.app-footer .row.gov .left {
  width: 140px;
  height: 1px;
}

.app-footer .row.gov .right {
  -ms-flex: 1 1;
  flex: 1 1;
}

.app-footer .row.gov .right .gov-link {
  display: -ms-flexbox;
  display: flex;
  margin-top: 5px;
}

.app-footer .row.gov .right .gov-link a {
  display: block;
  margin-right: 8px;
}

.app-footer .row.gov .right .gov-link a img {
  height: 32px;
}

.scroll-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 24px;
  text-align: center;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.scroll-top:hover {
  color: #fff;
  background: #00cf97;
  border: none;
}

</style>
